<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 150px;
            /* background-color: #f00; */
            /* 圆角的方法 */
            border-radius: 60%;  


            /***背景色渐变**/
            background: -webkit-linear-gradient(top, #03F, #9dccdc);
            background: -moz-linear-gradient(top, #03F, #9dccdc);
            background: -o-linear-gradient(top, #03F, #9dccdc);
            background: linear-gradient(top, #03F, #9dccdc);


            /*
                设置圆角
                -moz-border-radius: 50px;  //  兼容火狐浏览器
                -webkit-border-radius: 50px;  // 兼容苹果；谷歌，等一些浏览器认              
                -o-border-radius: 50px;  // 兼容opera浏览器  
            */

            /* 
                -moz-border-radius: {1,4} | inherit
                若是你想设置四个角都是同样圆角的话，能够像这样子直接设置-moz-border-radius:5px;
                也能够单独设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft来设置。
                也能够用合并起来一块儿设置


                1.对4个角都设置。 css3 圆角
                #box { -moz-border-radius: 20px; }

                2.对左上角和右下角设置同一种圆角，而右上角和左下角是同一种圆角。 css3 圆角
                #box { -moz-border-radius:20px 40px; }

                3.左上角为20px的圆角，右上和左下是40px的圆角，而右下则是5px的圆角。css3 圆角
                #box { -moz-border-radius:20px 40px 5px; }

                4.比较规则，则是右上、右上、右下、左下依次是10px/20px/30px/40px的圆角。css3 圆角
                #box { -moz-border-radius:10px 20px 30px 40px; }

                5. 分别控制4个位置的圆角。
                -moz-border-radius-topleft for the top-left corner;
                -moz-border-radius-topright for the top-right corner;
                -moz-border-radius-bottomright for the bottom-right corner;
                -moz-border-radius-bottomleft for the bottom-left corner;
                #box { -moz-border-radius-topright: 30px; }
                #box { -moz-border-radius-topleft: 30px; }
                #box { -moz-border-radius-topleft: 30px 15px; }

            */

        }
    </style>
</head>

<body>
    <!-- 创建这个盒子 -->
    <div class="box"></div>
</body>

</html>